<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script>
      function sendQuery() {
        axios
          .request({
            url: "http://139.196.82.122:3000/query",
            method: "get",
            // `params` 是与请求一起发送的 URL 参数
            //    => 定义在params中的对象数据，会基于对象的属性名和属性值自动组成请求参数格式
            params: {
              username: "tom",
              age: 23,
              skills: ["html", "css", "js"],
              address: {
                loc: "江苏南京",
                area: "秦淮区",
              },
            },
          })
          .then(({ data }) => {
            console.log(data);
          })
          .catch((error) => {
            console.log(error);
            if (error.status == 404) {
              alert("请求地址错误");
            } else {
              alert("请求错误");
            }
          });
      }

      function sendQuery2() {
        // axios.get(url, config);
        axios
          .get("http://139.196.82.122:3000/query", {
            params: {
              arg1: "参数1",
              arg2: "参数2",
              arg3: "参数3",
            },
          })
          .then(({ data }) => {
            console.log(data);
          })
          .catch((error) => {
            console.log(error);
            if (error.status == 404) {
              alert("请求地址错误");
            } else {
              alert("请求错误");
            }
          });
      }

      // 不带请求体不支持请求体参数 'GET', 'HEAD', 'OPTIONS' 请求方法
      // 带有请求体支持请求体参数 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
      function sendPost() {
        axios.request({
          url: "http://139.196.82.122:3000/body",
          method: "post",
          // `data` 是作为请求体被发送的数据
          // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
          // 完成参数的标准格式化
          //    标准1：application/json (axiso得默认请求体参数规则-现代服务器的标准规则)
          //    标准2：application/x-www-form-urlencoded (手动设置content-type)
          //    标准3：multipart/form-data (通过 new FormData 参数对象会自动激活 = 文件上传)
          // 自定义请求头
          headers: {
            "content-type": "application/x-www-form-urlencoded",
          },
          data: {
            username: "tom",
            age: 23,
            skills: ["html", "css", "js"],
            address: {
              loc: "江苏南京",
              area: "秦淮区",
            },
          },
        });
      }

      function sendPost2() {
        // axios.post(url, data, config);
        //    url ： 请求地址
        //    data ： 对象格式参数
        //    config ：其它请求配置
        axios.post("http://139.196.82.122:3000/body", {
          username: "tom",
          age: 23,
          skills: ["html", "css", "js"],
          address: {
            loc: "江苏南京",
            area: "秦淮区",
          },
        });
      }
      function sendPost3() {
        axios.post(
          "http://139.196.82.122:3000/body",
          {
            username: "tom",
            age: 23,
            skills: ["html", "css", "js"],
            address: {
              loc: "江苏南京",
              area: "秦淮区",
            },
          },
          {
            headers: {
              "content-type": "application/x-www-form-urlencoded",
            },
          }
        );
      }

      // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/MIME_types/Common_types
      const whiltFileType = ["image/png", "image/jpg"];

      function updateImg() {
        // 1. 获取文件二进制信息
        let fileDom = document.querySelector("#img");
        // files 存储了文件的二进制信息
        console.log(fileDom.files[0]);
        let type = fileDom.files[0].type;
        console.log(type);

        if (whiltFileType.includes(type)) {
          // 2. 获取了文件的二进制信息数据后，需要将其转换为ajax文件参数
          let fd = new FormData(); // 构建ajax支持二进制文件数据参数的对象
          // .append(参数名称,参数值)
          fd.append("file", fileDom.files[0]);
          fd.append("username", "admin");
          axios.post("http://139.196.82.122:3000/upload", fd);
        } else {
          alert("只允许上传png,jpg图片");
        }
      }

      const whiltFileType2 = ["png", "jpg"];
      function updateImg2() {
        let fileDom = document.querySelector("#img");
        let fileName = fileDom.files[0].name;
        let type = fileName.split(".").at(-1); // 获取分割后数组的最后一位
        console.log(type);

        if (whiltFileType2.includes(type)) {
          let fd = new FormData();
          fd.append("file", fileDom.files[0]);
          fd.append("username", "admin");
          axios.post("http://139.196.82.122:3000/upload", fd);
        } else {
          alert("只允许上传png,jpg图片");
        }
      }
    </script>
  </head>
  <body>
    <input type="button" value="get参数" onclick="sendQuery()" />
    <input type="button" value="get参数" onclick="sendQuery2()" />
    <hr />
    <!-- 1. 文本参数传递 -->
    <input type="button" value="post参数" onclick="sendPost()" />
    <input type="button" value="post参数" onclick="sendPost2()" />
    <input type="button" value="post参数" onclick="sendPost3()" />

    <hr />
    <!-- 2. 文件参数传递=>参数转为二进制 new FormData() -->
    <!-- 多选模式 -->
    <!-- <input type="file" multiple id="img" /> -->
    <!-- 单选模式 -->
    <input type="file" id="img" />
    <input type="button" value="文件上传" onclick="updateImg()" />
    <input type="button" value="文件上传" onclick="updateImg2()" />
  </body>
</html>
